<template>
  <d2-container>
    <el-form ref="form" :model="formData" label-width="160px" style="width:800px;margin-top:40px">
      <el-form-item label="用户端地址：" prop="url">
        <div>{{formData.url}}</div>
      </el-form-item>
      <el-form-item label="页面标题：" prop="pagename">
        <el-input v-model="formData.pagename" placeholder="请输入页面标题" />
      </el-form-item>
      <el-form-item label="标题：" prop="title">
        <el-input v-model="formData.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="标题颜色：" prop="title_color">
        <el-color-picker v-model="formData.title_color"></el-color-picker>
      </el-form-item>
      <el-form-item label="确认按钮颜色：" prop="button_color">
        <el-color-picker v-model="formData.button_color"></el-color-picker>
      </el-form-item>
      <el-form-item label="顶部图片：" prop="top_pic">
        <upload v-model="formData.top_pic" tips="建议尺寸:750*315"></upload>
      </el-form-item>
      <el-form-item label="分享标题：" prop="share_title">
        <el-input v-model="formData.share_title" placeholder="请输入分享标题" />
      </el-form-item>
      <el-form-item label="分享简介：" prop="share_des">
        <el-input type="textarea" v-model="formData.share_des" :rows="4" placeholder="请输入分享简介" />
      </el-form-item>
      <el-form-item label="分享图片：" prop="share_img">
        <upload v-model="formData.share_img" tips="建议尺寸:200*200"></upload>
      </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
    </el-form>
  </d2-container>
</template>

<script>
import { crudOptions } from './crud' // 上文的crudOptions配置
import { d2CrudPlus } from '@/components/d2-crud-plus'
import { GetList, editConfig } from '@/api/page' // 查询添加修改删除的http请求接口
export default {
  name: 'Page',
  mixins: [d2CrudPlus.crud], // 最核心部分，继承d2CrudPlus.crud
  data () {
    return {
      tableData: [],
      tableLoading: false,
      formData: {
        pagename: '',
        title: '',
        title_color: '',
        button_color: '',
        top_pic: '',
        share_title: '',
        share_des: '',
        share_img: ''
      }
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions
    },
    doRefresh () {
      this._getTableData()
    }, // 数据请求
    _getTableData () {
      this.tableLoading = true
      GetList().then(res => {
        this.formData = res || {}
        console.log(this.formData)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    onSubmit () {
      const { formData } = this
      editConfig({ ...formData }).then(res => {
        this._getTableData()
      }).finally(() => {
        this.submitLoading = false
      })
    }
  }
}
</script>
<style>
.el-upload--picture-card {
    box-sizing: border-box;
    width: 80px !important;
    height: 80px !important;
    line-height: 79px !important;
}
.el-upload-list--picture-card .el-upload-list__item {
    width:80px;
    height: 80px;
    margin: 0 8px 8px 0;
}
.el-input {
    margin-right: 10px;
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100% !important;
}
</style>